<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页制作</title>
    <style>
        #father {
            border: 1px solid red;
            width: 1200px;
            height: 2112px;
            margin: auto;
        }
        #logo{
            border: 1px solid black;
            width: 12000px;
            height: 50px;
        }
        .top{
            border: 1px solid blue;
            width: 400px;
            height: 50px;
            float: left;
        }

        #top{
            padding-top: 12px;
            height: 38px;
        }
        #menu{
            border: 1px solid red;
            width: 1200px;
            height: 50px;
            background-color: black;
        }
        ul li{
            display: inline;
            color: white;
        }
        #product{
            border: 1px solid red;
            width: 1200px;
            height: 560px;
        }
        #product_top{
            border: 1px solid blue;
            width: 100%;
            height: 45px;
            padding-top: 8px;
        }
        #product_bottom{
            border: 1px solid green;
            width: 100%;
            height: 500px;
        }
        #product_bottom_left{
            border: 1px solid red;
            width: 200px;
            height: 500px;
            float: left;
        }
        #product_bottom_right{
            border: 1px solid blue;
            width: 994px;
            height: 500px;
            float: left;
        }
        #big{
                     border: 1px solid red;
                     width: 591px;
                     height: 250px;
                     float: left;
                 }
        .small{
            border: 1px solid blue;
            width: 196px;
            height:250px;
            float: left;
            /*让里面的内容集中*/
            text-align: center ;
        }
        #bottom{
            text-align: center;
        }
        a{
            text-decoration:none ;
        }
    </style>
</head>
<body>
    <div id="father">
    <!--1.logo部分-->
        <div id="logo">
            <div class="top">
                <img src="../../../img/logo2.png" height="46px">
            </div>
            <div class="top">
                <img src="../../../img/header.png" height="46px">
            </div>
            <div class="top" id="top">
                <a href="#">登陆</a>
                <a href="#">注册</a>
                <a href="#">购物车</a>
            </div>

        </div>

    <!--2.导航栏部分-->
        <div id="menu">
            <uL>
                <a href="#"><li style="font-size: 20px;">首页</li></a>&nbsp;&nbsp;&nbsp;&nbsp;
                <a href="#"> <li>手机数码</li></a>&nbsp;&nbsp;&nbsp;&nbsp;
                <a href="#"> <li>家用电器</li></a>&nbsp;&nbsp;&nbsp;&nbsp;
                <a href="#"><li>鞋靴箱包</li></a>&nbsp;&nbsp;&nbsp;&nbsp;
                <a href="#"><li>孕婴保健</li></a>&nbsp;&nbsp;&nbsp;&nbsp;
                <a href="#"><li>奢饰品</li></a>
            </uL>
        </div>
    <!--3.轮播部分-->
        <div>
            <img src="../../../img/1.jpg" width="100%">
        </div>
    <!--4.最新商品-->
        <div id="product">
            <div id="product_top">
                <span style="font-size: 25px;padding-top: 8px;">最新商品</span>&nbsp;&nbsp;&nbsp;&nbsp;
                <img src="../../../img/title2.jpg">
            </div>
                <div id="product_bottom">
                    <div id="product_bottom_left">
                        <img src="../../../img/big01.jpg" width="100%" height="100%" />
                    </div>
                    <div id="product_bottom_right">
                        <div id="big">
                            <a href="#">
                                <img src="../../../img/middle01.jpg" width="100%" height="100%">
                            </a>
                        </div>
                        <div class="small">
                                <img src="../../../img/small03.jpg" >
                            <a href="#">
                                <p style="color:gray"    styple="height: 115px;" >电炖锅</p>
                                <p style="color:red">￥399</p>
                            </a>
                        </div>
                        <div class="small">
                            <img src="../../../img/small03.jpg" >
                            <a href="#">
                                <p style="color:gray"   styple="height: 115px;" >电炖锅</p>
                                <p style="color:red">￥399</p>
                            </a>
                        </div>
                        <div class="small">
                            <img src="../../../img/small03.jpg" >
                            <a href="#">
                                <p style="color:gray"   styple="height: 115px;" >电炖锅</p>
                                <p style="color:red">￥399</p>
                            </a>
                        </div>
                        <div class="small">
                            <img src="../../../img/small03.jpg" >
                            <a href="#">
                                <p style="color:gray"   styple="height: 115px;" >电炖锅</p>
                                <p style="color:red">￥399</p>
                            </a>
                        </div>
                        <div class="small">
                            <img src="../../../img/small03.jpg" >
                            <a href="#">
                                <p style="color:gray"   styple="height: 115px;" >电炖锅</p>
                                <p style="color:red">￥399</p>
                            </a>
                        </div>
                        <div class="small">
                            <img src="../../../img/small03.jpg" >
                            <a href="#">
                                <p style="color:gray"   styple="height: 115px;" >电炖锅</p>
                                <p style="color:red">￥399</p>
                            </a>
                        </div>
                        <div class="small">
                            <img src="../../../img/small03.jpg" >
                            <a href="#">
                                <p style="color:gray"   styple="height: 115px;" >电炖锅</p>
                                <p style="color:red">￥399</p>
                            </a>
                        </div>

                    </div>
                </div>
        </div>
    <!--5.广告图片-->
        <div id="">
                <img src="../../../img/ad.jpg" width="100%">
        </div>
    <!--6.热门商品-->
        <div id="product">
            <div id="product_top">
                <span style="font-size: 25px;padding-top: 8px;">最新商品</span>&nbsp;&nbsp;&nbsp;&nbsp;
                <img src="../../../img/title2.jpg">
            </div>
            <div id="product_bottom">
                <div id="product_bottom_left">
                    <img src="../../../img/big01.jpg" width="100%" height="100%" />
                </div>
                <div id="product_bottom_right">
                    <div id="big">
                        <a href="#">
                            <img src="../../../img/middle01.jpg" width="100%" height="100%">
                        </a>
                    </div>
                    <div class="small">
                        <img src="../../../img/small03.jpg" >
                        <a href="#">
                            <p style="color:gray"    styple="height: 115px;" >电炖锅</p>
                            <p style="color:red">￥399</p>
                        </a>
                    </div>
                    <div class="small">
                        <img src="../../../img/small03.jpg" >
                        <a href="#">
                            <p style="color:gray"   styple="height: 115px;" >电炖锅</p>
                            <p style="color:red">￥399</p>
                        </a>
                    </div>
                    <div class="small">
                        <img src="../../../img/small03.jpg" >
                        <a href="#">
                            <p style="color:gray"   styple="height: 115px;" >电炖锅</p>
                            <p style="color:red">￥399</p>
                        </a>
                    </div>
                    <div class="small">
                        <img src="../../../img/small03.jpg" >
                        <a href="#">
                            <p style="color:gray"   styple="height: 115px;" >电炖锅</p>
                            <p style="color:red">￥399</p>
                        </a>
                    </div>
                    <div class="small">
                        <img src="../../../img/small03.jpg" >
                        <a href="#">
                            <p style="color:gray"   styple="height: 115px;" >电炖锅</p>
                            <p style="color:red">￥399</p>
                        </a>
                    </div>
                    <div class="small">
                        <img src="../../../img/small03.jpg" >
                        <a href="#">
                            <p style="color:gray"   styple="height: 115px;" >电炖锅</p>
                            <p style="color:red">￥399</p>
                        </a>
                    </div>
                    <div class="small">
                        <img src="../../../img/small03.jpg" >
                        <a href="#">
                            <p style="color:gray"   styple="height: 115px;" >电炖锅</p>
                            <p style="color:red">￥399</p>
                        </a>
                    </div>

                </div>
            </div>
        </div>
    <!--7.广告图片-->
        <div id="">
            <img src="../../../img/footer.jpg" width="100%">
        </div>
    <!--友情连接和版权信息-->
        <div id="bottom">
            <a href="#">关于我们</a>
            <a href="#">联系我们</a>
            <a href="#">招贤纳士</a>
            <a href="#">法律声明</a>
            <a href="#">友情链接</a>
            <a href="#">支付方式</a>
            <a href="#">配送方式</a>
            <a href="#">服务声明</a>
            <a href="#">广告声明</a>
            <p>
                Copyright @ 22019-4-30 传智商城 版权所有
            </p>
        </div>
    </div>
</body>
</html>